<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>畅销书排行页面</title>
		<link rel="shortcut icon" href="img/favicon.ico">
		<link rel="stylesheet" href="https://unpkg.com/aos@2.3.1/dist/aos.css" />
		<!-- 内部样式 -->
		<style type="text/css">
			.box {
				width: 310px;
				background-color: #F2F4DF;
			}

			.title {
				width: 310px;
				background-color: #518700;
				background-image: url("./img/畅销书排行素材/bang.gif");
				background-repeat: no-repeat;
				background-position: 100px 12px;

				text-indent: 1em;
				line-height: 50px;
				color: white;
				font-weight: bold;
			}

			ul {
				margin-left: 20px;
			}

			li {

				line-height: 30px;
				list-style: none;
			}

			li:nth-child(1) {
				list-style-image: url("img/畅销书排行素材/book_no01.gif");
			}

			li:nth-child(2) {
				list-style-image: url("img/畅销书排行素材/book_no02.gif");
			}

			li:nth-child(3) {
				list-style-image: url("img/畅销书排行素材/book_no03.gif");
			}

			li:nth-child(4) {
				list-style-image: url("img/畅销书排行素材/book_no04.gif");
			}

			li:nth-child(5) {
				list-style-image: url("img/畅销书排行素材/book_no05.gif");
			}

			li:nth-child(6) {
				list-style-image: url("img/畅销书排行素材/book_no06.gif");
			}

			li:nth-child(7) {
				list-style-image: url("img/畅销书排行素材/book_no07.gif");
			}

			li:nth-child(8) {
				list-style-image: url("img/畅销书排行素材/book_no08.gif");
			}

			li:nth-child(9) {
				list-style-image: url("img/畅销书排行素材/book_no09.gif");
			}

			li:nth-child(10) {
				list-style-image: url("img/畅销书排行素材/book_no10.gif");
			}

			a {
				color: #4273C2;
				text-decoration: none;
				font-family: Georgia, 'Times New Roman', Times, serif;
			}

			a:hover {
				text-decoration: underline;
			}
		</style>
	</head>
	<body>
		<div class="box" data-aos="fade-right">
			<div class="title">畅销书排行</div>
			<ul>
				<li><a href="">不抱怨的世界(畅. . .</a></li>
				<li><a href="">遇见未知的自己. . .</a></li>
				<li><a href="">活法（季羡林、. . .</a></li>
				<li><a href="">高效能人士的七个习惯</a></li>
				<li><a href="">被迫强大（北外女生香奈儿. . .</a></li>
				<li><a href="">遇见心想事成的自己（《遇. . .</a></li>
				<li><a href="">世界上最伟大的推销员（插. . .</a></li>
				<li><a href="">我的成功可以复制（唐骏亲. . .</a></li>
				<li><a href="">少有人走的路：心智成熟的. . .</a></li>
				<li><a href="">活出全新的自己——唤醒. . .</a></li>
			</ul>
		</div>


		<!-- AOS js -->
		<script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
		<script>
			AOS.init({
				offset: 200,
				delay: 0,
				duration: 1000
			});
		</script>
	</body>
</html>
